<template>
    <div class="header-container">

        <Hamburger :is-active="appStore.opened" @toggleOpened="toggleOpened" />
        
        <Breadcrumb />

        <div class="menu-tool">
            <el-tooltip content="设置">
                <Setting class="icon-setting" @click="menuToolDrawer = true" />
            </el-tooltip>
            <el-drawer v-model="menuToolDrawer" :size="240">
                <template #header>
                    <span style="font-weight:bold">系统设置</span>
                </template>
                <el-form>
                  <el-form-item label="系统主题">
                    <el-switch 
                        v-model="isDark"
                        active-icon="Sunny"
                        inactive-icon="Moon"
                        inline-prompt
                    />
                  </el-form-item>
                </el-form>
            </el-drawer>
        </div>

        <div class="menu-down">
            <el-dropdown trigger="click">
                <div class="dropdown-menu-title">
                    <img :src="avatar" alt="">
                    <span>{{ name }}</span>
                    <CaretBottom style="width:16px;" />
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="a">个人中心</el-dropdown-item>
                        <el-dropdown-item command="b" @click="loginOut">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup lang='ts'>
import Hamburger from '@/components/Hamburger.vue'
import Breadcrumb from '@/components/Breadcrumb.vue'
import { useApp, useUser } from '@/stores/app'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import { ref, watch } from 'vue'
import { toggleDark, isDark } from '@/utils/dark'
const router = useRouter()
const appStore = useApp()
const userStores = useUser()
// 解构state里的变量会丢失响应式，需要使用toRefs或者pinia自带的storeToRefs方法
const { opened } = storeToRefs(appStore)
const { name, avatar } = storeToRefs(userStores)
const menuToolDrawer = ref<boolean>(false)
const flag = ref<boolean>(false)

watch(() => flag.value, (newVal, val) => {
    toggleDark()
})

const toggleOpened = () => {
    opened.value = !opened.value
    sessionStorage.setItem('sidebarStatus', opened.value?'1':'0')
}

const loginOut = () => {
    userStores.loginOut()
    router.push('/login')
}
</script>
<style lang="scss" scoped>
.header-container {
    height: 60px;
    line-height: 60px;
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f1f1f133;
    .menu-tool {
        height: 100%;
        width: 160px;
        position: absolute;
        right: 180px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .icon-setting {
            width:24px;
            color:#FFCB01;
            outline:none;
            &:hover {
                cursor: pointer;
            }
        }
    }
    .menu-down {
        position: absolute;
        right: 40px;
        cursor: pointer;

        .dropdown-menu-title {
            height: 60px;
            display: flex;
            align-items: center;

            img {
                width: 40px;
                height: 40px;
                border-radius: 7px;
                margin-right: 8px;
            }

            span {
                font-weight: bold;
            }

            .iconfont {
                width: 16px;
                height: 16px;
            }
        }
    }
}

</style>